<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{isEdit?'编辑圈子':'创建圈子'}}</block>
		</cu-custom>
		<scroll-view>
			<view class="flex justify-center align-center padding-left padding-right padding-top">
				<text class="text-grey">创建圈子需要消耗{{createCircleScore}}个山竹哦~</text>
			</view>
			<view class="cu-card article">
				<view class="cu-item">
					<form>
						<view class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-start align-center">
									<view class="label text-df padding-right">头像:</view>
									<view @tap="ViewImage" :data-url="avatar" class="cu-avatar round"
										:style="'background-image: url('+avatar+');'"></view>
									<view class="flex justify-start align-center">
										<view class="padding-left load-cuIcon"
											:class="requestStatus.isUpingAvatar?'loading':'over'"></view>
										<view v-if="requestStatus.isUpingAvatar">
											<text class="padding-left-xs text-grey text-sm">上传中</text>
										</view>
										<view v-else-if="requestStatus.isAvatarChanged">
											<text
												class="padding-left-xs text-grey text-sm">{{requestStatus.upingAvatarSuccess?'上传成功':'上传失败'}}</text>
										</view>
									</view>
								</view>
								<view @tap="ChooseAvatarImage"
									class="action lines-grey flex justify-center align-center solid">
									<text class="cuIcon-camera text-grey padding-sm"></text>
								</view>
							</view>
						</view>
						<view class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-start align-center">
									<view class="label text-df padding-right">背景:</view>
									<view @tap="ViewImage" :data-url="background" class="cu-avatar round"
										:style="'background-image: url('+background+');'"></view>
									<view class="flex justify-start align-center">
										<view class="padding-left load-cuIcon"
											:class="requestStatus.isUpingBack?'loading':'over'"></view>
										<view v-if="requestStatus.isUpingBack">
											<text class="padding-left-xs text-grey text-sm">上传中</text>
										</view>
										<view v-else-if="requestStatus.isBackChanged">
											<text
												class="padding-left-xs text-grey text-sm">{{requestStatus.upingBackSuccess?'上传成功':'上传失败'}}</text>
										</view>
									</view>
								</view>
								<view @tap="ChooseBackgroundImage"
									class="action lines-grey flex justify-center align-center solid">
									<text class="cuIcon-camera text-grey padding-sm"></text>
								</view>
							</view>
						</view>
						<view class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-start align-center" style="width: 100%;">
									<view class="label text-df padding-right">名称:</view>
									<input style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="请输入标题"
										v-model="title"></input>
								</view>
							</view>
						</view>
						<view class="cu-form-group padding-sm">
							<view @tap="chooseCategory" class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-between align-center" style="width: 100%;">
									<view class="flex justify-start align-center" style="width: 100%;">
										<view class="label text-df padding-right">分类:</view>
										<input disabled="true" style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="请选择圈子类别"
											v-model="category.name"></input>
									</view>
									<text class="cuIcon-right text-grey"></text>
								</view>
							</view>
						</view>
<!-- 						<view class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-between align-center" style="width: 100%;">
									<view class="flex justify-start align-center" style="width: 100%;">
										<view class="label text-df padding-right">入圈审核:</view>
										<input disabled="true" style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="是否需要圈主审核">
										</input>
									</view>
									<switch :checked="isClose" @change="auditJoinChange"></switch>
								</view>
							</view>
						</view>
						<view class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-between align-center" style="width: 100%;">
									<view class="flex justify-start align-center" style="width: 100%;">
										<view class="label text-df padding-right">密钥入圈:</view>
										<input disabled="true" style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="通过输入密钥加入">
										</input>
									</view>
									<switch :checked="usePassword" @change="passwordJoinChange"></switch>
								</view>
							</view>
						</view>
						<view v-if="usePassword" class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-start align-center" style="width: 100%;">
									<view class="label text-df padding-right">密钥:</view>
									<input style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="字母,符号,数字组合,最长8位"
										v-model="password"></input>
								</view>
							</view>
						</view>
						<view class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-between align-center" style="width: 100%;">
									<view class="flex justify-start align-center" style="width: 100%;">
										<view class="label text-df padding-right">积分入圈:</view>
										<input disabled="true" style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="积分购买入圈权限">
										</input>
									</view>
									<switch :checked="useScore" @change="useScoreJoinChange"></switch>
								</view>
							</view>
						</view>
						<view v-if="useScore" class="cu-form-group padding-sm">
							<view class="flex justify-between align-center" style="width: 100%;">
								<view class="flex justify-start align-center" style="width: 100%;">
									<view class="label text-df padding-right">积分:</view>
									<input style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="入圈消耗积分数"
										v-model="openScore"></input>
								</view>
							</view>
						</view> -->
<!-- 						<view class="cu-form-group padding-sm" style="height:100upx;">
							<view class="justify-between align-center flex" style="width: 100%;">
								<view class="flex justify-start align-center" style="width: 100%;">
									<view class="label text-df padding-right">标签:</view>
									<input style="font-size: 26upx;width: 100%;" class="text-sm" placeholder="自定义标签"
										v-model="tagsShow"></input>
								</view>
								<button class="cu-btn bg-blue radius sm" style="min-width: 100upx;">+添加</button>
							</view>
						</view> -->
						<view class="cu-form-group align-start" style="height:200upx;">
							<view class="label text-df padding-right padding-top">介绍:</view>
							<textarea @input="contentUpdate" maxlength="-1" :value="content"
								placeholder="请输入圈子介绍" style="height: 100%;"></textarea>
						</view>
					</form>
				</view>
			</view>
		</scroll-view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white foot action flex justify-around align-center padding-top"
				style="width: 100%;">
			<button @tap="commitAction()" :class="'cu-btn round '+themeColor" style="width: 65%;">立即创建</button>
		</view>
	</view>
</template>

<script>
	import {
		uploadFile,
		uploadImage,
		createOrUpdateCircle
	} from '@/api/api.js'
	import config from '@/api/config.js'
	export default {
		computed: {
			tagsShow() {
				return this.tags.join(' ') 
			}
		},
		data() {
			return {
				createCircleScore:config.createCircleScore,
				circleId:null,
				themeColor:this.ThemeColor,
				isEdit: false,
				content:null,
				title:null,
				category:null,
				avatar:null,
				background:null,
				isClose:false,
				usePassword:false,
				useScore:false,
				password:null,
				tags:[],
				openScore:0,
				requestStatus: {
					isAvatarChanged: false,
					isUpingAvatar: false,
					upingAvatarSuccess: false,
					isBackChanged:false,
					isUpingBack:false,
					upingBackSuccess:false,
				}
			}
		},
		methods: {
			commitAction() 
			{
				if(this.title == null || this.title.length == 0) {
					uni.showToast({
						icon:'none',
						title:'请填写圈名字'
					})
					return
				}
				if(this.title.length > 12) {
					uni.showToast({
						icon:'none',
						title:'圈名不可超过12个字'
					})
					return
				}
				if(this.avatar == null || (this.isAvatarChanged && this.requestStatus.upingAvatarSuccess == false)) {
					uni.showToast({
						icon:'none',
						title:'请上传头像'
					})
					return
				}
				if(this.background == null || (this.isBackChanged && this.requestStatus.upingBackSuccess == false)) {
					uni.showToast({
						icon:'none',
						title:'请上传背景'
					})
					return
				}
				if(this.category == null) {
					uni.showToast({
						icon:'none',
						title:'请选择分类'
					})
					return
				}
				if(this.useScore && this.openScore <= 0) {
					uni.showToast({
						icon:'none',
						title:'积分入圈时需设置大于0的积分值'
					})
					return
				}
				if(this.useScore && this.openScore > 9999) {
					uni.showToast({
						icon:'none',
						title:'积分入圈不可以设置超过9999的入圈积分'
					})
					return
				}
				if(this.usePassword && this.password.length <= 0) {
					uni.showToast({
						icon:'none',
						title:'密钥入圈时需设置密钥'
					})
					return
				}
				if(this.usePassword && this.password.length > 8) {
					uni.showToast({
						icon:'none',
						title:'密钥长度不可以超过8位'
					})
					return
				}
				if(this.content == null || this.content.length == 0) {
					uni.showToast({
						icon:'none',
						title:'请填写圈介绍'
					})
					return
				}
				let params = {
					'name':this.title,
					'introduce':this.content,
					'avatar':this.avatar,
					'background':this.background,
					'isOpen':this.isClose?0:1,
					'categoryId':this.category.category_id
				}
				if(this.useScore) {
					params['openScore'] = this.openScore
				}
				if(this.usePassword) {
					params['password'] = this.password
				}
				if(this.circleId !== null) {
					params['circleId'] = this.circleId
				}
				uni.showLoading({
					title:'正在提交...'
				})
				createOrUpdateCircle(params).then(res=>{
					uni.hideLoading()
					uni.$emit('ShowNetworkMsg','创建成功') 
					uni.navigateBack({
						delta:1
					})
				}).catch(error=>{
					uni.hideLoading()
				})
			},
			contentUpdate(e) {
				this.content = e.detail.value
			},
			chooseCategory() 
			{
				let that = this
				uni.navigateTo({
					url:'/pages/lessuse/create-circle/circle-category-list',
					events:{
						finishChoose:function(data) {
							that.category = data
						}
					}
				})
			},
			useScoreJoinChange(e) {
				console.log('use scrore change',e.target.value)
				this.useScore = e.target.value
				this.isClose = !this.useScore
				if(this.usePassword && this.useScore) {
					uni.showToast({
						icon:'none',
						title:'积分或密码入圈只能二选一'
					})
					this.usePassword = false
				}
			},
			auditJoinChange(e) {
				console.log('audit join change',e.target.value)
				this.isClose = e.target.value
			},
			passwordJoinChange(e) {
				console.log('password join change',e.target.value)
				this.usePassword = e.target.value
				this.isClose = !this.usePassword
				if(this.usePassword && this.useScore) {
					uni.showToast({
						icon:'none',
						title:'积分或密码入圈只能二选一'
					})
					this.useScore = false
				}
			},
			ChooseAvatarImage() {
				let this_ = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						let that_ = this_
						uni.navigateTo({
							url: '/pages/picture-cropper/picture-cropper?isIcon=1&url=' + res
								.tempFilePaths[0],
							events: {
								// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
								imageCropperFinish: function(data) {
									console.log(data.url)
									that_.avatar = data.url
									that_.requestStatus.isAvatarChanged = true
									let timestamp = new Date().getTime()
									let fileKey = String(timestamp)
									let _that = that_
									_that.requestStatus.isUpingAvatar = true
									uploadImage(data.url, fileKey, (imgUrl) => {
										console.log(imgUrl)
										_that.avatar = imgUrl
										_that.requestStatus.upingAvatarSuccess = true
										_that.requestStatus.isUpingAvatar = false
									}, (error) => {
										_that.requestStatus.upingAvatarSuccess = false
										_that.requestStatus.isUpingAvatar = false
									})
								}
							}
						})
					}
				});
			},
			ChooseBackgroundImage() {
				let this_ = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						let that_ = this_
						uni.navigateTo({
							url:'/pages/picture-cropper/picture-cropper?isBackground=1&url='+res.tempFilePaths[0],
							events: {
							    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
							    imageCropperFinish: function(data) {
								  console.log(data.url)
							      that_.background = data.url
								  that_.requestStatus.isBackChanged = true
							      let timestamp = new Date().getTime()
							      let fileKey = String(timestamp)
								  let _that = that_
								  _that.requestStatus.isUpingBack = true
							      uploadImage(data.url, fileKey, (imgUrl) => {
							      	console.log(imgUrl)
							      	_that.background = imgUrl
									_that.requestStatus.isUpingBack = false
									_that.requestStatus.upingBackSuccess = true
							      }, (error)=>{
									 _that.requestStatus.isUpingBack = false
									 _that.requestStatus.upingBackSuccess = false 
								  })
							    }
							}
						})
					}
				});
			},
			ViewImage(e) {
				console.log(e.currentTarget.dataset.url)
				let currentUrl = e.currentTarget.dataset.url
				if(currentUrl == null || currentUrl.length == 0) {
					return
				}
				uni.previewImage({
					urls: [e.currentTarget.dataset.url],
					current: e.currentTarget.dataset.url
				});
			},
		},
	}
</script>

<style scoped>

</style>
